<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>京夕夕商城--忘记密码</title>
    <link rel="icon" href="">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-register.css"/>

    <script src="/js/jquery.js"></script>
    <script src="/js/pintuer.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/alert.js"></script>

</head>
<body>

<div class="register py-container ">
    <!--head-->
    <div class="logoArea">
        <a href="" class="logo"></a>
    </div>
    <!--register-->
    <div class="registerArea" id="registerApp">
        <h3>忘记密码！<span class="go">返回<a href="/login.html" target="_self">登陆</a></span></h3>
        <div class="info" style="width: 650px">
            <form class="sui-form form-horizontal">
                <div class="control-group">
                    <label class="control-label">用户名：</label>
                    <div class="controls">
                        <input type="text" placeholder="请输入您的用户名" class="input-xfat input-xlarge"
                               v-model.lazy="user.userAccount" name="userAccount" data-vv-as="用户名"
                               v-validate="'required|alpha_dash|min:4|max:30|useful:1'">
                        <p class="msg" style="color: red;float: right"></p>
                    </div>
                    <span style="color: red;" >{{ errors.first('userAccount')}}</span>
                </div>
                <div class="control-group">
                    <label class="control-label">密保问题：</label>
                    <div class="controls">
                        <select id="securityId">
                            <option selected="selected" value="默认值">请选择问题</option>
                            <option v-for="security in securityList" :value="security.securityId" >
                                {{security.securityQuestion}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">答 案：</label>
                    <div class="controls">
                        <input  placeholder="请输入您的答案" class="input-xfat input-xlarge"
                               v-model="user.userPassword" name="userPassword" data-vv-as="密码"
                               v-validate="'required|alpha_dash|min:4|max:30'">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">新密码：</label>
                    <div class="controls">
                        <input type="password" placeholder="设置新密码" class="input-xfat input-xlarge"
                               v-model="user.userPassword" name="userPassword" data-vv-as="密码"
                               v-validate="'required|alpha_dash|min:4|max:30'">
                    </div>
                    <span style="color: red;">{{ errors.first('userPassword') }}</span>
                </div>
                <div class="control-group">
                    <label class="control-label">确认密码：</label>
                    <div class="controls">
                        <input type="password" placeholder="再次确认密码" class="input-xfat input-xlarge"
                               v-model="user.cfgPassword" name="cfgPassword" data-vv-as="确认密码"
                               v-validate="{required:true,confirm:user.userPassword}">
                    </div>
                    <span style="color: red;">{{ errors.first('cfgPassword') }}</span>
                </div>
                <div class="control-group">
                    <label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input name="m1" type="checkbox" value="2" checked=""><span>同意协议并修改《京夕夕用户协议》</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls btn-reg">
                        <a class="sui-btn btn-block btn-xlarge btn-danger" href="javascript:void(0)"
                           @click.stop="submit"
                        >确定修改</a>
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>

    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
    <!-- 底部栏位 -->
    <!--页面底部版权信息，由js动态加载-->
    <div class="Mod-copyright"></div>
    <script type="text/javascript">$(".Mod-copyright").load("copyright.html");</script>
    <!--页面底部END-->

</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>

    var vue = new Vue({
        el:"#pass",
        data:{
            userId: "",
            userAccount:"",
            userInfo:{},
            securityList:[]
        },
        methods:{
            showSecurityQuestion:function () {
                let url = "/user/showSecurityQuestion?userId="+this.userId;
                axios.get(url)
                    .then(function (result) {
                        let securityList = result.data;
                        this.vue.securityList = securityList;
                    })
                    .catch();
            },
            updatePassword:function () {
                let url1 = "/user/getPassword?userAccount="+this.userAccount+"&userPassword="+$("#mpass").val();
                axios.get(url1)
                    .then(function (result) {
                        if (result.data.status==200){
                            let updatePass = {
                                userId:this.vue.userId,
                                userPassword:$("#newpass").val(),
                                securityId:$("#securityId").find("option:selected").val(),
                                securityAnswer:$("#answer").val(),
                            };
                            let url2 = "/user/updatePassword";
                            axios.put(url2,updatePass)
                                .then(function (result) {
                                    if (result.data.status==200) {
                                        window.alert("修改成功");
                                    }else {
                                        window.alert("修改失败");
                                    }
                                })
                                .catch();
                        }else {
                            $(".msg").html(result.data.msg);
                        }
                    })
                    .catch();
            },
        },
        mounted:function () {
            this.showId();
        }
    })
</script>
</body>
</html>